<template>
  <div class="releaseExam">
    <head-Menu></head-Menu>
    <div class="GTPContainer">
      <el-steps :active="active" simple>
        <el-step title="创建试卷" icon="el-icon-edit"></el-step>
        <el-step title="组装试卷" icon="el-icon-upload"></el-step>
        <el-step title="预览试卷" icon="el-icon-picture"></el-step>
      </el-steps>
      <div v-if="active == 0">
        <h1>创建试卷</h1>
        <el-form ref="GTPForm" :model="GTPForm" label-width="80px" style="width:480px;margin-left:0px;margin:0 auto;text-align:left;">
          <el-form-item label="试卷名称">
            <el-input v-model="GTPForm.textPaperName" maxlength="30" show-word-limit />
          </el-form-item>
          <el-form-item label="课目">
            <el-radio-group v-model="GTPForm.subject">
              <el-radio label="语文"></el-radio>
              <el-radio label="数学"></el-radio>
              <el-radio label="英语"></el-radio><br>
              
              <el-radio label="理科综合" style="margin-top:15px"></el-radio>
              <el-radio label="物理" style="margin-top:15px"></el-radio>
              <el-radio label="化学" style="margin-top:15px"></el-radio>
              <el-radio label="生物" style="margin-top:15px"></el-radio><br>
              
              <el-radio label="文课综合" style="margin-top:15px"></el-radio>
              <el-radio label="政治" style="margin-top:15px"></el-radio>
              <el-radio label="历史" style="margin-top:15px"></el-radio>
              <el-radio label="地理" style="margin-top:15px"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="组卷方式">
            <el-radio-group v-model="GTPForm.method" size="medium">
              <el-radio-button label="选题组卷"></el-radio-button>
              <el-radio-button label="随机组卷"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
          </el-form-item>
        </el-form> 
      </div>
      <div v-else-if="active == 1" style="display: flex;justify-content: space-around;margin-top:10px">
        <div class="topicData">
          <div style="margin: 10px 0">总题数：{{topicData.length != []? topicData.choiceQue.length + topicData.judgeQue.length + topicData.fillBlankQue.length + topicData.comprehensiveQue.length : 0}}</div>
          <div style="margin: 10px 0; display:flex">
            选择题：{{topicData.choiceQue? topicData.choiceQue.length : 0}}
            <div style="margin-left:40px;">每题<input v-model="choiceSC" @change="scoreNum('单选题', 0)" type="number" min=1 max=30 style="background:none;outline:none;border:none;border-bottom:1px solid #000;width:30px;text-align:right">分</div> 
          </div>
          <div style="margin: 10px 0; display:flex">
            判断题：{{topicData.judgeQue ? topicData.judgeQue.length : 0}}  
            <div style="margin-left:40px;">每题<input v-model="judgeSC" @change="scoreNum('判断题')" type="number" min=1 max=30 style="background:none;outline:none;border:none;border-bottom:1px solid #000;width:30px;text-align:right">分</div> 
          </div>
          <div style="margin: 10px 0; display:flex">
            填空题：{{topicData.fillBlankQue ? topicData.fillBlankQue.length : 0}}
            <div style="margin-left:40px;">每题<input v-model="fillBlankSC" @change="scoreNum('填空题')" type="number" min=1 max=30 style="background:none;outline:none;border:none;border-bottom:1px solid #000;width:30px;text-align:right">分</div> 
            </div>
          <div style="margin: 10px 0; display:flex">
            综合题：{{topicData.comprehensiveQue ? topicData.comprehensiveQue.length : 0}}
            <div style="margin-left:40px;">每题<input v-model="comprehensiveSC" @change="scoreNum('综合题')" type="number" min=1 max=30 style="background:none;outline:none;border:none;border-bottom:1px solid #000;width:30px;text-align:right">分</div> 
            </div>
          <div style="margin: 10px 0">总 分：</div>
        </div>
        <div class="selectTopic">
          <div class="examPaper">
            <h3 style="text-align:center">{{GTPForm.textPaperName}}</h3>
            <el-divider content-position="right">作者</el-divider>
            <div style="min-height:70px;padding-left: 10px">一、选择题
              <div v-for="(data, i) in topicData.choiceQue">
                <h5>
                  <span style="max-width:500px;display:block; ">{{i + 1}}、{{data.stem}}</span>
                  <span style="float:right; margin-right:20px">本题<input v-model="topicScore.choiceScore[i]" type="number" min=1 max=30 style="background:none;outline:none;border:none;border-bottom:1px solid #000;width:30px;text-align:right">分</span>
                </h5>
                <el-radio-group v-model="option" size="mini" >
                  <el-radio label="A" style="margin-bottom:5px;margin-top: -50px;">A、{{data.A}}</el-radio>
                  <el-radio label="B" style="margin-bottom:5px">B、{{data.B}}</el-radio>
                  <el-radio label="C" style="margin-bottom:5px">C、{{data.C}}</el-radio>
                  <el-radio label="D" style="margin-bottom:5px">D、{{data.D}}</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div style="min-height:70px;padding-left: 10px">二、判断题
              <div v-for="(data, i) in topicData.judgeQue">
                <h5>
                  <span style="max-width:800px;display:block; ">{{i + 1}}、{{data.stem}}</span>
                  <span style="float:right; margin-right:20px">本题<input v-model="topicScore.judgeScore[i]" type="number" min=1 max=30 style="background:none;outline:none;border:none;border-bottom:1px solid #000;width:30px;text-align:right">分</span>
                </h5>
                <el-radio-group v-model="judge" size="mini" >
                  <el-radio label="true" style="margin-bottom:5px;margin-top: -50px;">
                    <i class="el-icon-check"></i>
                  </el-radio>
                  <el-radio label="false" style="margin-bottom:5px">
                    <i class="el-icon-close"></i>
                  </el-radio>
                </el-radio-group>
              </div>
            </div>
            <div style="min-height:70px;padding-left: 10px">三、填空题
              <div v-for="(data, i) in topicData.fillBlankQue">
                <h5>
                  <span style="max-width:800px;display:block; ">{{i + 1}}、{{data.stem}}</span>
                  <span style="float:right; margin-right:20px">本题<input v-model="topicScore.fillBlankScore[i]" type="number" min=1 max=30 style="background:none;outline:none;border:none;border-bottom:1px solid #000;width:30px;text-align:right">分</span>
                </h5>
                <el-input style="width:300px" v-model="fillBlank" placeholder="请输入内容"></el-input>
              </div>
            </div>
            <div style="min-height:70px;padding-left: 10px">四、综合题
              <div v-for="(data, i) in topicData.comprehensiveQue">
                <h5>
                  <span style="max-width:800px;display:block; ">{{i + 1}}、{{data.stem}}</span>
                  <span style="float:right; margin-right:20px">本题<input v-model="topicScore.comprehensiveScore[i]" type="number" min=1 max=30 style="background:none;outline:none;border:none;border-bottom:1px solid #000;width:30px;text-align:right">分</span>
                </h5>
                <el-input style="width:300px" type="textarea" :autosize="{ minRows: 4, maxRows: 30}" placeholder="请输入内容" v-model="comprehensive"></el-input>
              </div>
            </div>
            <el-button @click="getTopic({subject: GTPForm.subject}),drawer = true;" icon="el-icon-plus" style="width:100%;height:110px;font-size:50px;margin:0 auto;margin-top:5px;color:#50a3a2"></el-button>
          </div>
          <el-button style="margin-top:12px;" @click="next">下一步</el-button>
          <el-drawer :title="GTPForm.subject + '题库'" :visible.sync="drawer" direction="btt" size="70%">
            <div style="display:flex;justify-content: space-between;margin:0 20px">
              <el-radio-group v-model="isQueBank" size="medium" @change="topicSelect">
                <el-radio-button label="试题列表"></el-radio-button>
                <el-badge :value="multipleSelection.length">
                  <el-radio-button label="已选试题"></el-radio-button>
                </el-badge>
              </el-radio-group>
              <el-input placeholder="请输入内容" v-model="search" style="width:350px">
                <template slot="prepend">考察点</template>
              </el-input>
            </div>
            <el-table v-if="isQueBank == '试题列表'" ref="multipleTable" :data="tableData" border height="340" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="题号" prop="topicNum" width="90"></el-table-column>
              <el-table-column label="课目" prop="subject" width="60"></el-table-column>

              <el-table-column label="题目类型" prop="topicType" width="100"
                :filters="[{ text: '单选题', value: '单选题' }, { text: '多选题', value: '多选题' }, { text: '填空题', value: '填空题' }]"
                :filter-method="filterHandler">
              </el-table-column>

              <el-table-column label="题干" prop="stem" show-overflow-tooltip></el-table-column>
              <el-table-column label="答案" prop="answer" width="200" show-overflow-tooltip></el-table-column>
              <el-table-column label="考察点" prop="answer" width="200" show-overflow-tooltip ></el-table-column>
            </el-table>
            <el-table v-else-if="isQueBank == '已选试题'" ref="multipleTable" :data="selectedData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="题号" prop="topicNum" width="90"></el-table-column>
              <el-table-column label="课目" prop="subject" width="60"></el-table-column>

              <el-table-column label="题目类型" prop="topicType" width="100"
                :filters="[{ text: '单选题', value: '单选题' }, { text: '多选题', value: '多选题' }, { text: '填空题', value: '填空题' }]"
                :filter-method="filterHandler">
              </el-table-column>

              <el-table-column label="题干" prop="stem" show-overflow-tooltip></el-table-column>
              <el-table-column label="答案" prop="answer" width="200" show-overflow-tooltip></el-table-column>
              <el-table-column label="考察点" prop="answer" width="200" show-overflow-tooltip></el-table-column>
            </el-table>
            <el-button @click="preservation" type="primary">保存</el-button>
          </el-drawer>
        </div>
      </div>
      <div v-else-if="active == 2" style="display: flex;justify-content: space-around;margin-top:10px">
          <div class="selectTopic">
            <div class="examPaper">
              <h3 style="text-align:center">{{GTPForm.textPaperName}}</h3>
              <el-divider content-position="right">作者</el-divider>
              <div v-if="topicData.choiceQue.length != 0" style="min-height:70px;padding-left: 10px">选择题
                <div v-for="(data, i) in topicData.choiceQue">
                  <h5>
                    <span style="max-width:800px;display:block; ">{{i + 1}}、({{topicScore.choiceScore[i]}}分) {{data.stem}}</span>
                  </h5>
                  <el-radio-group v-model="option" size="mini" >
                    <el-radio label="A" style="margin-bottom:5px;margin-top: -50px;">A、{{data.A}}</el-radio>
                    <el-radio label="B" style="margin-bottom:5px">B、{{data.B}}</el-radio>
                    <el-radio label="C" style="margin-bottom:5px">C、{{data.C}}</el-radio>
                    <el-radio label="D" style="margin-bottom:5px">D、{{data.D}}</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div v-if="topicData.judgeQue.length != 0" style="min-height:70px;padding-left: 10px;padding-top:10px">判断题
                <div v-for="(data, i) in topicData.judgeQue">
                  <h5>
                    <span style="max-width:800px;display:block; ">{{i + 1}}、({{topicScore.judgeScore[i]}}分) {{data.stem}}</span>
                  </h5>
                  <el-radio-group v-model="judge" size="mini" >
                    <el-radio label="true" style="margin-bottom:5px;margin-top: -50px;">
                      <i class="el-icon-check"></i>
                    </el-radio>
                    <el-radio label="false" style="margin-bottom:5px">
                      <i class="el-icon-close"></i>
                    </el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div v-if="topicData.fillBlankQue.length != 0" style="min-height:70px;padding-left: 10px;padding-top:10px">填空题
                <div v-for="(data, i) in topicData.fillBlankQue">
                  <h5>
                    <span style="max-width:800px;display:block; ">{{i + 1}}、({{topicScore.fillBlankScore[i]}}分) {{data.stem}}</span>
                  </h5>
                  <el-input style="width:300px" v-model="fillBlank" placeholder="请输入内容"></el-input>
                </div>
              </div>
              <div v-if="topicData.comprehensiveQue.length != 0" style="min-height:70px;padding-left: 10px;padding-top:10px">综合题
                <div v-for="(data, i) in topicData.comprehensiveQue">
                  <h5>
                    <span style="max-width:800px;display:block; ">{{i + 1}}、({{topicScore.comprehensiveScore[i]}}分) {{data.stem}}</span>
                  </h5>
                  <el-input style="width:500px" type="textarea" :autosize="{ minRows: 4, maxRows: 30}" placeholder="请输入内容" v-model="comprehensive"></el-input>
                </div>
              </div>
            </div>
            <el-button style="margin-top:12px;" @click="createTextPaper">创建成功</el-button>
        </div>
      </div>
    </div> 
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getTopic, createTextPaper } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      GTPForm: {
        textPaperName: '',
        subject: '',
        method: '',
        desc: '',
      },
      topicData: [],
      topicScore: {
        choiceScore: [],
        judgeScore: [],
        fillBlankScore: [],
        comprehensiveScore: [],
      },

      tableData: [],
      selectedData: [],
      multipleSelection: [],
      search: '',

      choiceSC: 5,
      judgeSC: 1,
      fillBlankSC: 5,
      comprehensiveSC: 20,

      option: 'A',
      judge: 'true',
      fillBlank: '',
      comprehensive: '',

      active: 0,
      drawer: false,
      isQueBank: '试题列表',
    }
  },
  components: {
    headMenu
  },
  created() {

  },
  methods: {
    async getTopic(TD) {
      // console.log(TD);
      await getTopic(TD)
        .then((res) => {
          // console.log(res);
          console.log(TD.subject);
          if (TD.subject != undefined) {
            this.tableData = res.topic
          }else {
            this.topicData = res.topic
            this.scoreNum('', 1)
          }
        })
      this.topicSelect()
    },
    async createTextPaper(){
      await createTextPaper({
        topicData: this.topicData,
        topicScore: this.topicScore,
        GTPForm: this.GTPForm
      })
        .then((res) => {
          Toast(res.msg)
          Object.assign(this.$data, this.$options.data());
        })
    },

    preservation(){
      this.drawer = false
      this.selectedData = this.multipleSelection
      this.getTopic(this.selectedData)
    },
    handleSelectionChange(val) {
      if (val != '') {
        this.multipleSelection = val;
      }
    },
    topicSelect(table) {
      if (this.isQueBank == '试题列表') {
        table = this.tableData
      }else if (this.isQueBank == '已选试题'){
        this.selectedData = this.multipleSelection
        table = this.selectedData
      } 
      this.$nextTick(() => {
        this.multipleSelection.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(table.find(item => row.topicNum == item.topicNum), true);
        });
      })
    },
    scoreNum(type, special) {
      if (special == 1) {
        for (let i = 0; i < this.topicData.choiceQue.length; i++) {
          this.topicScore.choiceScore.push(this.choiceSC)
        }
        for (let i = 0; i < this.topicData.judgeQue.length; i++) {
          this.topicScore.judgeScore.push(this.judgeSC)
        }
        for (let i = 0; i < this.topicData.fillBlankQue.length; i++) {
          this.topicScore.fillBlankScore.push(this.fillBlankSC)
        }
        for (let i = 0; i < this.topicData.comprehensiveQue.length; i++) {
          this.topicScore.comprehensiveScore.push(this.comprehensiveSC)
        }
      }
      else if (type == '单选题')
        for (let i = 0; i < this.topicData.choiceQue.length; i++) {
          this.topicScore.choiceScore[i] = this.choiceSC
        }
      else if (type == '判断题')
        for (let i = 0; i < this.topicData.judgeQue.length; i++) {
          this.topicScore.judgeScore[i] = this.judgeSC
        }
      else if (type == '填空题')
        for (let i = 0; i < this.topicData.fillBlankQue.length; i++) {
          this.topicScore.fillBlankScore[i] = this.fillBlankSC
        }
      else if (type == '综合题')
        for (let i = 0; i < this.topicData.comprehensiveQue.length; i++) {
          this.topicScore.comprehensiveScore[i] = this.comprehensiveSC
        }
    },

    next() {
      if (!this.GTPForm.textPaperName) {
        Toast('试卷名称不为空')
        return
      }else if(!this.GTPForm.subject){
        Toast('请选择课目')
        return
      }else if(!this.GTPForm.method){
        Toast('请选择组卷方式')
        return
      }
      if (this.active++ > 2) 
        this.active = 0;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
  }
}
</script>

<style lang='stylus'>
.releaseExam
  color #666
  flex 1 1 100%
  display block
  .GTPContainer
    margin 0 10px
    text-align center
  .topicData
    width 180px
    max-height 200px
    text-align left
    padding-left 10px
    font-size 13px
    font-weight 600
    box-shadow 1px 1px 5px #888
    border-radius 20px
    overflow-y auto
    .anchor 
      margin: 10px auto
  .selectTopic
    width 80%
    padding-bottom 10px
    border 1px solid #CCCCCC
    border-radius 10px
  .is-fixed
    top 8px
    right 18px
  .examPaper
    text-align left
    max-height 490px
    overflow-y auto
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
</style>